<template>
	<view class="main-box">

		<view class="input-box">
			<view class="name">
				头像
			</view>
			<view class="value" @click="chooseImage">
				<block v-if="userInfo.headimg">
					<image :src="userInfo.headimg" class="img1"></image>
				</block>
				<block v-else>
					<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/photo.png" class="img1"></image>
				</block>
			</view>
		</view>
		<view class="input-box">
			<view class="name">
				姓名
			</view>
			<view class="value">
				<input v-model="userInfo.realname" placeholder="请输入姓名" />
			</view>
		</view>
		<view class="input-box">
			<view class="name">
				性别
			</view>
			<view class="value" @click="alterMain = true">
				{{userInfo.gender == 1?'男':userInfo.gender == 2?'女':'请点击选择'}}
				<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/my7.png"></image>
			</view>
		</view>
		<view class="input-box">
			<view class="name">
				年龄
			</view>
			<view class="value">
				<input v-model="userInfo.age" type="number" placeholder="年龄" />
			</view>
		</view>

		<view class="input-box">
			<view class="name">
				个人签名
			</view>
			<view class="textarea">
				<textarea v-model="userInfo.remark" placeholder="请输入个人签名"></textarea>
			</view>
		</view>
		<view class="btn" @click="submitFun">保存</view>
		<u-picker :show="alterMain" keyName="title" :columns="[columns]" closeOnClickOverlay @cancel="alterMain = false"
			@confirm="confirmFun"></u-picker>
	</view>
</template>
<script>
	import {
		getUserInfo,
		setUserInfo
	} from '@/api/api.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	export default {
		name: 'userEidt',
		data() {
			return {
				statusBarHeight: 0,
				alterMain: false,
				columns: [{
					title: '男',
					value: 1
				}, {
					title: '女',
					value: 2
				}],
				userInfo: {

				}
			}
		},
		onLoad(opition) {
			const that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusBarHeight = res.statusBarHeight + 55;
				}
			});
		},
		onLoad() {
			getUserInfo().then((res) => {
				this.userInfo = res.data
			})
		},
		methods: {
			submitFun() {
				const that = this;
				if (!that.userInfo.headimg) {
					return this.$u.toast('请上传头像')
				}
				if (!that.userInfo.realname) {
					return this.$u.toast('请输入姓名')
				}
				if (!that.userInfo.age) {
					return this.$u.toast('请输入年龄')
				}
				if (!that.userInfo.gender) {
					return this.$u.toast('请选择性别')
				}
				setUserInfo(this.userInfo).then((res) => {
					this.$u.toast('保存成功')
					uni.navigateBack()
				}).catch((err) => {
					this.$u.toast(err)
				})
			},
			confirmFun(e) {
				this.userInfo.gender = e.value[0].value
				this.alterMain = false;
			},
			chooseImage() {
				// uni.showModal({
				// 	title:'温馨提示',
				// 	content:'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
				// 	success(ress) {
				// 		if(ress.confirm){
				// 			// uni.setStorageSync('uploadImageOne',true)
				// 			uni.chooseImage({
				// 				count: 1,
				// 				sourceType: ['album'],
				// 				sizeType: ['original', 'compressed'],
				// 				success: (res) => {
				// 					that.urlArr = []
				// 					that.uploadFileAdd(res, 0, res.tempFilePaths.length)
				// 				}
				// 			});
				// 		}
				// 	}
				// })
				const that = this;
				if (uni.getStorageSync('uploadImageOne')) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album'],
						sizeType: ['original', 'compressed'],
						success: (res) => {
							that.urlArr = []
							that.uploadFileAdd(res, 0, res.tempFilePaths.length)
						}
					});
				} else {
					//  获取当前手机是IOS还是安卓
					const platform = uni.getSystemInfoSync().platform
					let opts = {};
					if (platform === "android") {
						opts = {
							title: '温馨提示',
							content: 'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
							success(ress) {
								if (ress.confirm) {
									uni.setStorageSync('uploadImageOne', true)
									uni.chooseImage({
										count: 1,
										sourceType: ['album'],
										sizeType: ['original', 'compressed'],
										success: (res) => {
											that.urlArr = []
											that.uploadFileAdd(res, 0, res.tempFilePaths.length)
										}
									});
								}
							}
						}
					} else {
						opts = {
							title: '温馨提示',
							content: 'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
							showCancel: false,
							confirmText: '下一步',
							success(ress) {
								if (ress.confirm) {
									uni.setStorageSync('uploadImageOne', true)
									uni.chooseImage({
										count: 1,
										sourceType: ['album'],
										sizeType: ['original', 'compressed'],
										success: (res) => {
											that.urlArr = []
											that.uploadFileAdd(res, 0, res.tempFilePaths.length)
										}
									});
								}
							}
						}
					}
					uni.showModal(opts)
				}
			},
			async uploadFileAdd(res, num, max) {
				const that = this
				if (num == max) {
					that.$nextTick(() => {
						that.userInfo.headimg = that.urlArr.join()
					})
				} else {
					const result = await that.uploadFileFun(res.tempFilePaths[num])
					that.urlArr.push(result.data.url)
					this.uploadFileAdd(res, num + 1, max)
				}

			},
			async uploadFileFun(src) {
				let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')

				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/newUpload',
						filePath: src,
						name: "file",
						header: {
							'Authorization': 'Bearer ' + token
						},
						success(res1) {
							resolve(JSON.parse(res1.data))
						},
						fail(res) {
							reject(res)
						}
					})
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
	.line1 {
		white-space: nowrap;
		overflow: hidden; //文本超出隐藏
		text-overflow: ellipsis; //文本超出省略号替代
	}

	view {
		box-sizing: border-box;
	}

	.main-box {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		padding-bottom: 50rpx;
		background-color: #f0f4f9;

		.input-box {
			width: 660rpx;
			line-height: 128rpx;
			border-radius: 20rpx;
			background-color: white;
			padding: 0 30rpx;
			overflow: hidden;
			margin: 30rpx auto;
			color: #434242;
			font-size: 30rpx;
			font-weight: 400;
			position: relative;
			z-index: 1;

			.name {
				width: 40%;
				display: inline-block;
				vertical-align: top;
			}

			.value {
				width: 60%;
				display: inline-block;
				vertical-align: top;
				text-align: right;
				font-size: 28rpx;

				image {
					width: 16rpx;
					height: 30rpx;
					display: inline-block;
					vertical-align: top;
					margin: 50rpx 0 0 20rpx;
				}

				input {
					width: calc(100% - 40rpx);
					height: 128rpx;
					font-size: 28rpx;
				}

				.img1 {
					width: 90rpx;
					height: 90rpx;
					margin: 20rpx 0 0 0;
					border-radius: 50%;
				}
			}

			.textarea {
				width: 100%;
				padding: 20rpx 0;

				textarea {
					height: 200rpx;
					line-height: 50rpx;
					font-size: 28rpx;
				}
			}
		}

		.btn {
			width: 590rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #2767e6;
			color: white;
			font-size: 30rpx;
			font-weight: 400;
			margin: 50rpx auto;
		}
	}
</style>